/**
 * Created by mac on 2017/7/4.
 */


import React, { Component,PropTypes } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    ScrollView,
    Image,
    ActivityIndicator,
    TouchableWithoutFeedback,
    ListView,
} from 'react-native';

var screenW = Dimensions.get('window').width;

var height= 44;

let allData = require('./data.json');
export default class Channels extends Component{


    static propTypes = {
        codeCallBack: PropTypes.func.isRequired,
    }

    // 构造
    constructor(props) {
        super(props);

        // 初始状态
        this.state = {
            list:[],
            index:'0',
        };
    }

    componentDidMount() {
        this.fetchData()
    }

    fetchData(){

        this.setState({
            list:allData.data.channels,
            index:allData.data.channels[0].id,
        })

    }

    selectedCode(code){


        this.setState({
            index:code,
        })

        this.props.codeCallBack&&this.props.codeCallBack(code);
    }

    renderList(){
        var _this = this;

        var data = this.state.list;
        var index = this.state.index;

        return data.map(function (item,i) {
            return (
                <TouchableWithoutFeedback  onPress={() =>_this.selectedCode(item.id)}>
                    <View key={i} style={{
                        paddingLeft:10,
                        paddingRight:10,
                        height : height,
                        alignItems:'center',
                        justifyContent:'center',
                    }}>
                        <Text
                            style={{
                            color:item.id==index?'#66b219':'black',
                            borderBottomWidth:2,
                            borderBottomColor:item.id==index?'#66b219':'#f0f8ff',
                        }}>
                            {item.name}
                        </Text>
                        <Image style={{position:'absolute',top:2,right:5,width:15,height:15}} resizeMode='contain' source={{uri:item.pic}}/>
                        <View style={{right:1,height:15,width:1,backgroundColor:'gray',position:'absolute',}}/>
                        <View style={{width:50,height:1,bottom:1,position:'absolute',backgroundColor:item.id==index?'#66b219':'#f0f8ff',}}/>
                    </View>

                </TouchableWithoutFeedback>

            )

        })


    }

    render(){
        var data = this.state.list;
        if (data.length === 0){
            return (
                <View style={[{flex:1,justifyContent:'center'}]}>
                    <ActivityIndicator size='large' color='gray'/>
                </View>
            )
        }
        return(

            <View style={{width:screenW,height:height,backgroundColor:'red'}}>
                <ScrollView
                    horizontal={true}
                    contentContainerStyle={{flexDirection : 'row'}}
                    showsHorizontalScrollIndicator={false}
                    style={styles.tabContainer}>
                    {this.renderList()}
                </ScrollView>

            </View>
        )
    }
}

var styles = StyleSheet.create({
    tabContainer: {
        flex: 1,
        borderBottomColor: '#eeeeee',
        borderBottomWidth: 1,
        borderTopColor: '#eeeeee',
        borderTopWidth: 1,
        backgroundColor: '#FAFAFA',
    }
})